<template>
  <div class="home">
    <div>
      <el-table
        :data="list"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="company"
          label="开票公司"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="agency"
          label="经销商"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="timestamp"
          label="时间戳"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="invoice_no"
          label="发票号"
          sortable
          width="180">
          <template slot-scope="scope">
            <el-input v-model=scope.row.invoice_no></el-input>
          </template>
        </el-table-column>



        <el-table-column
          label="操作">
          <template slot-scope="scope">
                        <el-popconfirm
                          title="确定提交该发票号吗？"
                          @onConfirm="up(scope.row.invoice_no,scope.row.timestamp)"
                        >
                          <el-button slot="reference" size="mini" >填入发票号</el-button>
                        </el-popconfirm>
<!--            <el-button @click="drawer = true;peihuo(scope.row.agency)" slot="reference" size="mini" >配货</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>



  </div>

</template>

<script>
import {check_outbound_details, outbound_record, suboutbound} from '../../api/outbound'
import { del_outbound } from '../../api/outbound'
import { agency_peihuo } from '../../api/outbound'
import { check_peihuo_product } from '../../api/outbound'
import { submit_peihuo_product } from '../../api/outbound'
import { check_invoice_no,up_invoice_no } from '../../api/outbound'


export default {
  name: 'invoice_no',
  data(){
    return{
      drawer:false,
      peihuo_form:[],

      user:true,
      list:[],
      pagesize:10,
      currentPage:1,
      form: {
        products:[
        ],
      }
    }
  },
  mounted() {
    this.check_invoice_no()
  },
  methods:{
    onSubmit() {
      // console.log(this.form)
      submit_peihuo_product(this.peihuo_form)
        .then(location. reload())
    },

    selectTrigger(value){
      var product = {product: value}
      Promise.all([
        new Promise((resolve, reject) => {
          check_peihuo_product(product).then(response => {resolve(response)
              // console.log(response)
            }
          )
        }),]
      ).then(result=> {
        // console.log(result[0].options)
        this.form.products = []
        for (let index = 0; index < result[0].options.length; index++) {
          this.form.products.push({ id : "" , inbound_no : "" ,product_name : "",qty : "",amount:'',bf:''});
          this.form.products[index].id= result[0].options[index][0];
          this.form.products[index].inbound_no= result[0].options[index][1];
          this.form.products[index].product_name= result[0].options[index][2];
          this.form.products[index].bf= result[0].options[index][3];
          this.form.products[index].qty= result[0].options[index][4];
        }
        console.log(this.form.products)})

        .catch(err => {
          console.log(err)
        })
    },
    check_invoice_no(){
      this.list = []
      check_invoice_no().then(res =>{
          // console.log(res["data"])
          this.list = res["data"]
        },
      )
    },
    peihuo(data){
      const req = {data:data}
      agency_peihuo(req)
        .then(res =>{
            // console.log(res["list"])
            this.peihuo_form = res["data"]
          },
        )
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    up(data1,data2){
      const msg = {
        invoice_no : data1,
        timestamp : data2
      }
      up_invoice_no(msg).then(
        location. reload()
      )

    },

  }

}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
